<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load static %}

<!-- 写入 base.html 中定义的 title -->
{% block title %}
首页
{% endblock title %}

<!-- 写入 base.html 中定义的 content -->
{% block content %}

<!-- 定义放置文章标题的div容器 -->
<div class="container">
    <!-- 面包屑导航 -->
    <nav aria-label="breadcrumb" style="background-color: #e8ecef;padding: 0.2vw;">
        <ol class="breadcrumb" style="margin-top: 0.4vw;">
            <li class="breadcrumb-item">
                <a href="{% url 'article:article_list' %}?search={{ search }}&column={{ column }}&tag={{ tag }}">
                    最新
                </a>
            </li>
            <li class="breadcrumb-item">
                <a
                    href="{% url 'article:article_list' %}?order=total_views&search={{ search }}&column={{ column }}&tag={{ tag }}">
                    最热
                </a>
            </li>
        </ol>
    </nav>
    <!-- 新增，搜索栏 -->
    <div class="row">
        <div class="col-auto mr-auto">
            <form class="form-inline">
                <label class="sr-only">content</label>
                <input type="text" class="form-control mb-2 mr-sm-2" name="search" placeholder="搜索文章..." required>
            </form>
        </div>
    </div>

    <!-- 新增，搜索提示语 -->
    {% if search %}
    {% if articles %}
    <h4><span style="color: red">"{{ search }}"</span>的搜索结果如下：</h4>
    <hr>
    {% else %}
    <h4>暂无<span style="color: red">"{{ search }}"</span>有关的文章。</h4>
    <hr>
    {% endif %}
    {% endif %}

    <!-- 列表循环 -->
    <div class="row mt-2">
        {% for article in articles %}
        <!-- 文章内容 -->
        <div class="col-12">
            <!-- 标题图 -->
        {% if article.avatar %}
        <div class="col-3">
            <img src="{{ article.avatar.url }}" 
                 alt="avatar" 
                 style="max-width:100%; border-radius: 20px"
            >
        </div>
    {% endif %}
            <!-- 栏目 -->
            {% if article.column %}
            <button type="button" class="btn btn-sm mb-2
                        {% if article.column.title == 'python' or article.column.title == 'vue' or article.column.title == 'TheGreat' %}
                            btn-success
                        {% elif article.column.title == 'html' %}
                            btn-danger
                        {% elif article.column.title == 'java' %}
                            btn-warning
                        {% endif %}
                    ">
                {{ article.column }}
            </button>
            {% endif %}
            <!-- 标签 -->
            <span margin: 5px 0;">
                {% for tag in article.tags.all %}
                <a href="{% url 'article:article_list' %}?tag={{ tag }}" 
                    style="margin-right: 5px; display: inline-block;">
                    <i class="fas fa-tag"></i> {{ tag }}
                </a>
                {% endfor %}
            </span>
            <!-- 标题 -->
            <h4>
                <b>
                    <a href="{% url 'article:article_detail' article.id %}" style="color: black;">
                        {{ article.title }}
                    </a>
                </b>
            </h4>
            <!-- 摘要 -->
            <div>
                <p style="color: gray;">
                    {{ article.body|slice:'100' }}...
                </p>
            </div>
            <!-- 注脚 -->
            <p>
                <!-- 附加信息 -->
                <span style="color: green;">
                    {{ article.total_views }} 浏览&nbsp;&nbsp;&nbsp;
                </span>
                <span style="color: blue;">
                    {{ article.created|date:'Y-m-d' }} 发布&nbsp;&nbsp;&nbsp;
                </span>
                <span style="color: darkred;">
                    {{ article.updated|date:'Y-m-d' }} 更新
                </span>
            </p>
            <hr>
        </div>
        {% endfor %}
    </div>
    <!-- 页码导航 -->
    <div class="pagination row" style="margin-top: 30%;text-align: center;">
        <div class="m-auto">
            <span class="step-links">
                <!-- 如果不是第一页，则显示上翻按钮 -->
                {% if articles.has_previous %}
                <a href="?page=1&order={{ order }}&search={{ search }}&column={{ column }}&tag={{ tag }}"
                    class="btn btn-success">
                    &laquo; 1
                </a>
                <span>...</span>
                <a href="?page={{ articles.previous_page_number }}&order={{ order }}&search={{ search }}&column={{ column }}&tag={{ tag }}"
                    class="btn btn-secondary">
                    {{ articles.previous_page_number }}
                </a>
                {% endif %}

                <!-- 当前页面 -->
                <span class="current btn btn-danger btn-lg">
                    {{ articles.number }}
                </span>

                <!-- 如果不是最末页，则显示下翻按钮 -->
                {% if articles.has_next %}
                <a href="?page={{ articles.next_page_number }}&order={{ order }}&search={{ search }}&column={{ column }}&tag={{ tag }}"
                    class="btn btn-secondary">
                    {{ articles.next_page_number }}
                </a>
                <span>...</span>
                <a href="?page={{ articles.paginator.num_pages }}&order={{ order }}&search={{ search }}&column={{ column }}&tag={{ tag }}"
                    class="btn btn-success">
                    {{ articles.paginator.num_pages }} &raquo;
                </a>
                {% endif %}
            </span>
        </div>
    </div>
</div>

{% endblock content %}